import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
import moment from 'moment'
import '@/router/permission'
// 引入amfe-flexible配置可伸缩布局方案，主要是将1rem设为viewWidth/10
import 'amfe-flexible'
// import hljs from 'highlight.js'
import 'highlight.js/styles/default.css' // 代码高亮的样式
// 引入Vant组件 - 全局注册
import { Lazyload, NavBar, Divider, Form, Field, Button, Icon, Tabbar, TabbarItem, Tab, Tabs, Cell, Popup, List, Tag, CellGroup, Image, Dialog, DatetimePicker, ActionSheet, Col, Row, Badge, Search, Image as VanImage, Loading, PullRefresh, Toast, Notify } from 'vant'
Vue.use(Lazyload, {
  lazyComponent: true
})
Vue.use(NavBar)
Vue.use(Notify)
Vue.use(Divider)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Tab)
Vue.use(Cell)
Vue.use(Tabs)
Vue.use(Popup)
Vue.use(List)
Vue.use(Tag)
Vue.use(CellGroup)
Vue.use(Image)
Vue.use(Dialog)
Vue.use(DatetimePicker)
Vue.use(ActionSheet)
Vue.use(Col)
Vue.use(Row)
Vue.use(Badge) // 徽标
Vue.use(Search)
Vue.use(VanImage)
Vue.use(Loading)
Vue.use(PullRefresh)
Vue.use(Toast)

Vue.config.productionTip = false
// 设置moment语言
moment.locale('zh-cn')
// 将moment第三方包挂载到vue原型上
Vue.prototype.$moment = moment

// 自定义指令---自动聚焦
Vue.directive('inp', {
  inserted (el) {
    // 通过querySelector查找子元素中标签为input的DOM节点
    // console.log(el.querySelector('input'))
    const inpDom = el.querySelector('input') || el
    inpDom.focus()
  }
})
// Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
//   const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
//   highlight.forEach((block) => {
//     hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
//   })
// })
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')
